import { Line, LineConfig } from '@ant-design/charts';
import React from 'react';
import styles from './LineChart.less';

type LineChartData = {
  year: string;
  value: number;
};
interface LineChartProps {
  chartId: string;
  lineChartData: Array<LineChartData>;
}

const LineChart: React.FC<LineChartProps> = ({ lineChartData, chartId }) => {
  const data = lineChartData;
  const config: LineConfig = {
    data,
    height: 400,
    xField: 'year',
    yField: 'value',
    point: {
      size: 5,
      shape: 'diamond',
    },
  };
  return (
    <div className={styles.lineChart}>
      <Line id={chartId} {...config} />
    </div>
  );
};

export default LineChart;
